<template>
  <div class="Animal">
    <div style="margin-top: 20px; margin-left: 105px">
      <sapn>动物编号：</sapn>
      <el-input placeholder="请输入动物编号" style="width: 246px" v-model="params.name">
      </el-input>
      <el-button style="margin-left: 5px"><i class="el-icon-search" @click="load">查询</i>
      </el-button>
      <el-button style="margin-left: 5px"><i class="el-icon-back" @click="">返回</i>
      </el-button>
    </div>

    <div style="margin-left: 100px">
      <template>
        <el-table :data="tableData" border style="width: 95%;margin-top: 10px">
          <el-table-column prop="id" label="动物序号" width="80"></el-table-column>
          <el-table-column prop="animalId" label="动物编号" width="120"></el-table-column>
          <el-table-column prop="location" label="位置" width="200"></el-table-column>
          <el-table-column prop="img" label="照片" width="120"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
          <el-table-column prop="status" label="领养状态" width="100">
            <template slot-scope="scope">
              <div
                  class="tableColumn-status"
                  :class="{ 'stop-use': String(scope.row.status) === '0' }"
              >
                {{ String(scope.row.status) === '0' ? '未领养' : '已领养' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                  size="mini"
                  @click="">编辑
              </el-button>
              <el-popconfirm
                  title="确定删除当前动物吗？"
                  @confirm=""
              >
                <el-button style="margin-left: 15px"
                           size="mini"
                           type="danger"
                           slot="reference">删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>


    <div class="block" style="margin-top: 20px;text-align: center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNumber"
          :page-size="params.pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import request from "../../utils/request";

export default {
  name: 'AnimalView',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        id: '',
        animalId:'',
        location: '',
        createTime: '',
        updateTime:'',
        status: '',
        url:'',
        pageNumber: 1,
        pageSize: 10
      },
    }
  },
  created() {
     this.load()
  },

  methods: {
    load() {
      request.get('/Animal/page', {
        params: this.params,
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      })
    },

    handleCurrentChange(pageNumber) {
      this.params.pageNumber = pageNumber
      this.load()
    },
  }
}
</script>